<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../../web-component-tester/browser.js"></script>
  <link rel="import" href="../../polymer.html">
</head>
<body class="desktop">

  <x-extended></x-extended>

  <dom-module id="x-extended">
    <link rel="import" type="css" href="styling-extends.css">
    <style>
      #container {
        border: 2px solid orange;
        padding: 10px;
      }

      #bar, .zow {
        margin: 10px;
        @extends(#foo);
      }

      #zot, .nug {
        padding: 10px;
        @extends(#bar);
      }

      .not {
        border: 20px solid orange;
      }

      #use {
        @extends(%use);
      }

      @media (max-width: 20000px) {
        .baz {
          padding: 15px;
        }

        #media {
          @extends(#foo);
          @extends(.baz);
        }
      }

      @media (max-width: 1px) {
        #media {
          @extends(.not);
        }
      }
    </style>

    <template>
    <div id="container">
      <div id="foo">Foo</div>
      <div id="bar">Bar</div>
      <div id="zot">Zot</div>
      <div id="media">Media</div>
      <div id="use">Use</div>
    </div>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-extended'
      });
    });
    </script>
  </dom-module>

<script>
  suite('styling-extends', function() {

  function assertComputed(element, value, property) {
    var computed = getComputedStyle(element);
    property = property || 'border-top-width';
    assert.equal(computed[property], value, 'computed style incorrect for ' + property);
  }

  var e = document.querySelector('x-extended');

  test('styles extended', function() {
    assertComputed(e.$.foo, '10px');
    assertComputed(e.$.bar, '10px');
    assertComputed(e.$.zot, '10px');
    assertComputed(e.$.bar, '10px', 'margin-top');
    assertComputed(e.$.zot, '10px', 'margin-top');
    assertComputed(e.$.zot, '10px', 'padding-top');
  });

  test('nested styles extended (e.g. @media)', function() {
    assertComputed(e.$.media, '10px');
    assertComputed(e.$.media, '15px', 'padding-top');
  });

  test('% selector extended', function() {
    assertComputed(e.$.use, '13px');
  });

  test('unused % selector stripped', function() {
    var s = e._scopeStyle || e.root.querySelector('style');
    assert.notMatch(s.textContent, /%remove/);
  });

});

</script>
</body>
</html>
